Google Maps in Blogger: Embedded Maps
This is part of my tutorial on how to use Google Maps into Google's Blogger service. This section teaches The Embedded Method.
Step 1 - Update The Blog Template
You need to make some one-time changes to your blog's template. It can seem a little intimidating, but it is not that bad! Click on the "Template" tab for your blog. Click on "Edit HTML" so you have an HTML view of your blog.
Replace <html> tag: Find the <html ....> tag. It should be near the top. Replace it with this one.
Insert some HTML: Find the <head> tag. It should be near the top. Insert a blank line after it, then insert the following code.
Replace <body> tag: Find the <body> tag. It should be towards the bottom. Replace it with this one.
Click the orange "Save Template Changes" button. Your blog should now be primed for Google Maps!
Tip! Before you make any changes to the template HTML, copy all of it and paste it into a text file. That way if you make any mistakes, you can go back to the previous template.
Step 2 - Get A Key
To use the Google Map-API, you first must register your domain and get an permission key. Click here to to this. It only takes a minute. When you apply for an API key, use the domain "http://myblog.blogspot.com" where "myblog" is your Blogger account name. This will allow the Maps-API key to work no matter which mode the post is viewed.
Step 3 - Create A Post
Now we will create a blog post that contains the map. Create a new post, go into "Edit HTML" mode, and insert the following code:
Be sure to update the key with the API key from step 2.
Then publish the post. Now view your blog. You should see a map of Monterey similar to the one on the bottom of this post.
Now let's tweak the map to show your content!
Step 4 - Update Target Coordinates
You need to tell Google Maps where on earth it should display. Do this with the latitude and longitude of the location of what you want to look at (your target). Read the chapter on Geocaching on how to get the coordinates. They need to be in decimal format. For example, the coordinates of Monterey, California used are latitude=36.610429, longitude=-121.896143. Notice that the numbers can be positive or negative. Six decimal places of precision of plenty for Google Maps. Any more than 6 digits is overkill.
Edit the post with the map in HTML mode. In there you will see the following Javascript statements:
Replace the values with your coordinates, then publish the blog post. View the post. It should now be looking at your target.
For example: 51.502332,-0.153122 shows London, England.
Step 5 - Set Zoom Factor
You also need to tell Google Earth what zoom factor to use. This is an integer from 0 to about 20. Increase it zoom in closer. Decrease it to zoom out ('0' shows the whole earth!). I've found that a value of 14 is a good place to start.
Edit the post with the map in HTML mode. In there you will see the Javascript statement:
Replace 14 with your desired value, then publish the blog post. View the post. It should now be looking at your target at the scale you want. Keep tweaking the zoom until you get it the way you want.
Step 6 (Optional) - Change Map Type
Sets the type of map you want to display... Map, Satellite, or Hybrid. Right now it is set to Map.
Edit the post with the map in HTML mode. In there you will see the Javascript statement:
Replace G_MAP_TYPE with one of the following values then publish the blog post. View the post.
- For a map image use G_MAP_TYPE
- For a satellite image use G_SATELLITE_TYPE
- For a hybrid image use G_HYBRID_TYPE
The map type control is the group of three buttons in the upper right hand corner of the map that allow the user the change the type to "Map", "Satellite", or "Hybrid". You can turn this off if you wish.
Edit the post with the map in HTML mode. In there you will see the Javascript statement
Replace true with false, then publish the blog post. View the post.
You can turn the control back on by changing this back to true.
Step 8 (Optional) - Remove Pan/Zoom Control
The pan/zoom control is the group of bottons buttons in the upper left hand corner of the map that allow the user the pan or scale the map. You can turn this off if you wish.
Edit the post with the map in HTML mode. In there you will see the Javascript statement:
Replace true with false, then publish the blog post. View the post.
You can turn the control back on by changing this back to true.
Step 9 (Optional) - Resize Map
The dimensions of the map are specified in the <div...> tag. It is set up for 400 x 400 pixels, which I find fits perfect in Blogger's blogs. However, if you want to change the size, then knock yourself out.
Edit the post with the map in HTML mode. In there you will see the HTML statement
Replace 400 with the width and hight you desire. Then publish the blog post and view the post to see how it looks.
Step 10 (Optional) - Add Custom Content
Now that the map is working, and is looking at your target the way you want, it is time to have fun and add your content to it. Google recently added a new feature called 'My Maps' that makes it really easy to add custom content. You don't need to learn how to code Javascript to add markers, paths, and other information to your map. You can do all that with an easy to use online editor. Then all of your content will automatically show up in your blog's map. Sweet!
Go to http://maps.google.com and create a custom map with your content. Make sure you save it as a public map! Click on the "Link To This Page" command and your browser's address bar will be updated with a long URL. Save this URL. It is how you link to your personalized map.
Now come back to Blogger. Edit the post with the map in HTML mode. In there you will see the Javascript statements:
Replace false with true.
Update the value of mymap (between the quotes) with the URL of your 'My Map'. For example, the URL for the sample MyMap that I created for this tutorial is
Your URL should look similar.
Publish the blog post. View the post. It should all be working now!
If you have some problems, click here for some advanced tutorial.
Labels: Technical
posted by Ron Larson @ 9:25 AM
<< Home